<template>
  <div class="app-container">
    <div>
      <el-input v-model="searches" style="width: 200px; margin-right: 10px; margin-bottom: 5px;" placeholder="搜索" clearable></el-input>
      <el-button type="primary" @click = "search()">搜索</el-button>
      <el-button type="primary" @click = "addModal()">添加</el-button>
    </div>

    <el-table :data="list" border fit highlight-current-row style="width: 100%">
      <el-table-column width="50px" align="center" label="ID">
        <template slot-scope="scope">
        <span>{{ scope.row.id }}</span>
        </template>
      </el-table-column>

      <el-table-column align="center" label="所属小区">
        <template slot-scope="scope">
          <span>{{ scope.row.communityName }}</span>
        </template>
      </el-table-column>

      <el-table-column align="center" label="栋数">
        <template slot-scope="scope">
          <span>{{ scope.row.name }}</span>
        </template>
      </el-table-column>

      <el-table-column align="center" label="总户数">
        <template slot-scope="scope">
          <span>{{ scope.row.totalHouseholds }}</span>
        </template>
      </el-table-column>

      <el-table-column align="center" label="描述">
        <template slot-scope="scope">
          <span>{{ scope.row.description }}</span>
        </template>
      </el-table-column>

      <el-table-column width="120px" align="center" label="操作">
        <template slot-scope="scope">
          <el-button size="mini" type="primary" icon="el-icon-edit" @click="update(scope.row)" circle></el-button>
          <el-button size="mini" type="danger" icon="el-icon-delete" @click="del(scope.row)" circle></el-button>
        </template>
      </el-table-column>
    </el-table>


<!-- 对话框 -->
    <el-dialog :title="title" :visible.sync="isShow" width="35%">
      <!-- 添加滚动条 -->
      <el-scrollbar style="height: 280px;">
        <el-form ref="form" label-width="80px">

         <el-form-item label="选择小区">
            <el-select v-model="buildForm.communityId" placeholder="请选择所属小区">
              <template v-for="item in communities">
                <el-option :label="item.name" :value="item.id" :key="item.id"></el-option>
              </template>
            </el-select>
          </el-form-item>

          <el-form-item label="栋数">
            <input type="hidden" v-model="buildForm.id" />
            <el-col :span="15">
              <el-input placeholder="填写如:1舍/1栋" v-model="buildForm.name"></el-input>
            </el-col>
          </el-form-item>

          <el-form-item label="总户数">
            <el-col :span="15">
              <el-input placeholder="请输入总户数" v-model="buildForm.totalHouseholds"></el-input>
            </el-col>
          </el-form-item>

          <el-form-item label="描述">
            <el-col :span="20">
              <el-input type="textarea" placeholder="请输入描述" v-model="buildForm.description"></el-input>
            </el-col>
          </el-form-item>
        </el-form>
      </el-scrollbar> <!-- end 滚动条 -->

      <span slot="footer" class="dialog-footer">
          <el-button @click="isShow = false">取 消</el-button>
          <el-button type="primary" @click="saveInfo()">保 存</el-button>
      </span>
    </el-dialog> <!-- end 对话框 -->


    <!-- page-size 默认每页显示条数 -->
    <div class="block">
      <el-pagination
        @size-change="selectPage"
        @current-change="handleCurrentChange"
        :current-page="curPage"
        :page-sizes="[1, 3, 5, 10]"
        :page-size="rows"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>
  </div>
</template>

<script>

import myUtil from '../../../utils/myUtil'

export default {
  name: 'buildList',
  data() {
    return {
      list: [],
      title: "添加",
      searches:"",//搜索条件
      communities: [],
      buildForm:{
        id: null,
        communityName: "",
        communityId: "",
        name: "",
        totalHouseholds: "",
        description: "",
        createTime: "",
        updateTime: ""
      },
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        }
      },
      total: 0, // 总条数
      totalPage: 0, // 总页数
      curPage: 1, // 当前页
      rows: 5, // 每页显示条数
      isShow: false,
      searches: ""
    }
  },
  methods: {
    getList() {
      var self = this;
      this.axios({
        method: 'get',
        url: myUtil.url + '/tb-building/listPage',
        params: {
          "currentPage": self.curPage,
          "pageSize": self.rows,
          "direction": self.searches
        }
      }).then(function(rs){
        //console.log(rs);
        self.list = rs.data.info;
        self.total = rs.data.total;
        self.totalPage = rs.data.totalPage;
      });
    },
    getCommunities() {
      var self = this;
      this.axios.get(myUtil.url + "/tb-community/communities").then((rs) => {
        //console.log(rs);
        self.communities = rs.data;
      })
    },
    addModal() {
      this.isShow = true;
      this.title = "添加楼栋";
      this.buildForm.id = null;
      this.buildForm.communityName = "";
      this.buildForm.communityId = "";
      this.buildForm.name = "";
      this.buildForm.totalHouseholds = "";
      this.buildForm.description = "";
    },
    update(x){
      this.isShow = true;
      this.title = "楼栋信息修改";
      this.buildForm.id = x.id;
      this.buildForm.communityName = x.communityName;
      this.buildForm.communityId = x.communityId;
      this.buildForm.name = x.name;
      this.buildForm.totalHouseholds = x.totalHouseholds;
      this.buildForm.description = x.description;
    },
    del(x) {
      var self = this;
      this.$confirm('此操作将永久删除该楼栋信息, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.axios.delete(myUtil.url + "/tb-building/del/" + x.id).then((rs) => {
          //console.log(rs);
          if(rs.data.info == "删除成功"){
            this.$message({
            type: 'success',
            message: '删除成功!'
            });
            this.getList();
          }
        })
      }).catch(() => {
        this.$message({
      	type: 'info',
      	message: '已取消删除'
        });
      });
    },
    saveInfo() { // 保存
      var self = this;
      if(this.title == "添加楼栋"){
        console.log(this.buildForm);
        this.axios.post(myUtil.url + "/tb-building/add", self.buildForm).then((rs) => {
          //console.log(rs);
          if (rs.data.info == "添加成功") {
            // 关闭模态框
            self.isShow = false;

            this.$notify({
              title: '成功',
              message: rs.data.info,
              type: 'success',
              duration: 2000
            });
            // 刷新
            self.getList();
          }
        })
      } else if(this.title == "楼栋信息修改"){
        //console.log(this.buildForm);
        this.axios.put(myUtil.url + "/tb-building/update", self.buildForm).then((rs) => {
          //console.log(rs);
          if (rs.data.info == "修改成功") {
            // 关闭模态框
            self.isShow = false;

            this.$notify({
              title: '成功',
              message: rs.data.info,
              type: 'success',
              duration: 2000
            });
            // 刷新
            self.getList();
          }
        })
      }
    },
    handleCurrentChange(v){ // 当前页触发事件
      this.curPage = v;
      this.getList();
    },
    selectPage(v) { // 用户选择页数
      this.rows = v;
      this.getList();
    },
    search(){
      this.curPage = 1;
      this.getList();
    }
  },
  mounted() {
    this.getList();
    this.getCommunities();
  }
}
</script>

<style scoped>
/deep/ .el-scrollbar__wrap {
  overflow-x: hidden;
}

.edit-input {
  padding-right: 100px;
}
.cancel-btn {
  position: absolute;
  right: 15px;
  top: 10px;
}

</style>
